<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>添加员工</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__CSS__/oksub.css">
    <script type="text/javascript" src="__LIB__/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
    <!--form表单-->
    <form class="layui-form ok-form ibms-dialog-form">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-col-xs6">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-block">
                    <input type="text" name="cellphone" lay-verify="required" autocomplete="off" placeholder="请输入手机号码" class="layui-input">
                </div>
            </div>
            <div class="layui-col-xs6">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="0" title="男" checked>
                    <input type="radio" name="sex" value="1" title="女">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-col-xs6">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-block">
                    <select name="dept_id" id="staffdept" lay-verify="required">
                        <option value="" selected>请选择部门</option>
                    </select>
                </div>
            </div>
            <div class="layui-col-xs6">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                    <select name="role_id" id="staffrole" lay-verify="required">
                        <option value="" selected>请选择角色</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" lay-verify="required" autocomplete="off" placeholder="请输入邮箱" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" lay-skin="switch" lay-text="启用|停用" value="1" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remarks" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
                <a class="layui-btn layui-btn-primary cancle-btn">取消</a>
            </div>
        </div>
    </form>
</div>
<!--js逻辑-->
<script src="__LIB__/layui/layui.js"></script>
<script>
    layui.use(["form", "jquery", "okLayer", "okUtils"], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        okLoading.close();

        okUtils.ajax("{:url('staffDept/getValidStaffDept')}").done(function (response) {
            $.each(response.data, function(index, item) {
                $('#staffdept').append(new Option(item.name, item.id));
            });
            form.render('select');
        }).fail(function (error) {
            // console.log(error)
        });

        okUtils.ajax("{:url('staffRole/getValidStaffRole')}").done(function (response) {
            $.each(response.data, function(index, item) {
                $('#staffrole').append(new Option(item.name, item.id));
            });
            form.render('select');
        }).fail(function (error) {
            // console.log(error)
        });

        form.on("submit(add)", function (data) {
            okUtils.ajax("{:url('add')}", "post", data.field, true).done(function (response) {
                okLayer.greenTickMsg(response.msg, function () {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                });
            }).fail(function (error) {
                // console.log(error)
            });
            return false;
        });

        $(".cancle-btn").click(function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });
    });
</script>
</body>
</html>
